```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Windows 升级模拟体验</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #0078D7;
            color: white;
            height: 100vh;
            overflow: hidden;
        }
        .windows-logo {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { opacity: 0.7; }
            50% { opacity: 1; }
            100% { opacity: 0.7; }
        }
        .progress-bar {
            height: 4px;
            background-color: rgba(255,255,255,0.2);
            border-radius: 2px;
        }
        .progress-fill {
            height: 100%;
            background-color: white;
            border-radius: 2px;
            width: 0%;
            animation: progress 15s linear forwards;
        }
        @keyframes progress {
            0% { width: 0%; }
            100% { width: 100%; }
        }
        .message-box {
            animation: fadeIn 1s ease-in;
        }
        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.8);
            color: rgba(255,255,255,0.7);
            padding: 10px 0;
            font-size: 12px;
        }
        .footer a {
            color: rgba(255,255,255,0.9);
            transition: color 0.3s;
        }
        .footer a:hover {
            color: white;
            text-decoration: underline;
        }
        .dot-flashing {
            position: relative;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: white;
            color: white;
            animation: dot-flashing 1s infinite linear alternate;
            animation-delay: 0.5s;
        }
        .dot-flashing::before, .dot-flashing::after {
            content: '';
            display: inline-block;
            position: absolute;
            top: 0;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: white;
            color: white;
        }
        .dot-flashing::before {
            left: -15px;
            animation: dot-flashing 1s infinite alternate;
            animation-delay: 0s;
        }
        .dot-flashing::after {
            left: 15px;
            animation: dot-flashing 1s infinite alternate;
            animation-delay: 1s;
        }
        @keyframes dot-flashing {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body class="flex flex-col items-center justify-center">
    <div class="text-center max-w-2xl px-6">
        <div class="windows-logo mb-8">
            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="white">
                <path d="M0 3h11v11H0V3zm12 0h12v11H12V3zM0 13h11v11H0V13zm12 0h12v11H12V13z"/>
            </svg>
        </div>
        
        <h1 class="text-4xl font-bold mb-4">Windows 11 升级中</h1>
        <p class="text-xl mb-8 opacity-90">您的电脑正在升级到最新版本，请不要关闭计算机</p>
        
        <div class="progress-bar w-full mb-8">
            <div class="progress-fill"></div>
        </div>
        
        <div class="message-box bg-white bg-opacity-10 rounded-lg p-6 mb-8 text-left">
            <div class="flex items-center mb-4">
                <div class="dot-flashing mr-3"></div>
                <p class="font-medium">正在安装更新 (5/12) - Windows 11 22H2</p>
            </div>
            <p class="text-sm opacity-80">此过程可能需要一些时间。您的电脑将会在升级完成后自动重启，请确保所有文件已保存。</p>
        </div>
        
        <div class="grid grid-cols-3 gap-4 text-sm opacity-80">
            <div>
                <p>当前版本</p>
                <p class="font-medium">Windows 10 21H2</p>
            </div>
            <div>
                <p>升级到</p>
                <p class="font-medium">Windows 11 22H2</p>
            </div>
            <div>
                <p>剩余时间</p>
                <p class="font-medium">约 15 分钟</p>
            </div>
        </div>
    </div>

    <div class="footer text-center">
        <p>技术小馆 · <a href="http://www.yuque.com/jtostring" target="_blank">http://www.yuque.com/jtostring</a></p>
    </div>

    <script>
        // 模拟进度更新
        document.addEventListener('DOMContentLoaded', function() {
            // 随机进度百分比显示
            const progressText = document.querySelector('.font-medium:nth-child(3)');
            const times = [15, 12, 10, 8, 5, 3, 2, 1];
            let index = 0;
            
            const interval = setInterval(() => {
                if (index < times.length - 1) {
                    index++;
                    progressText.textContent = `约 ${times[index]} 分钟`;
                } else {
                    clearInterval(interval);
                }
            }, 18000 / (times.length - 1));
            
            // 全屏提示
            document.addEventListener('keydown', function(e) {
                if (e.key === 'F11') {
                    setTimeout(() => {
                        const messageBox = document.querySelector('.message-box');
                        messageBox.innerHTML = `
                            <div class="flex items-center mb-4">
                                <i class="fas fa-info-circle mr-3"></i>
                                <p class="font-medium">提示：按 F11 可退出全屏模式</p>
                            </div>
                            <p class="text-sm opacity-80">这是一个模拟的 Windows 升级界面，仅供娱乐使用。您随时可以退出全屏模式。</p>
                        `;
                    }, 1000);
                }
            });
        });
    </script>
</body>
</html>
```